<template>
	<view class="content">
		<!-- 电量显示栏-->
		<view class="top_nav">
			<view class="kong"></view>
			<view class="tab_item">
				<view class="return" @click="returnPage">
					<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/course/jiantou.png"></image>
				</view>
				<view class="title">加入我们</view>
				<view class="return"></view>
			</view>
		</view>
		
		<form @submit="formSubmit">
			<view class="form_wrap">
				<view class="form_item">
					<view class="form_name">姓名</view>
					<view class="input_wrap">
						<input type="text" name="name" :value="userInfo.nickname" />
					</view>
				</view>
				<view class="form_item">
					<view class="form_name">手机号</view>
					<view class="input_wrap">
						<input type="number" maxlength="11" name="mobile" :value="userInfo.mobile" />
					</view>
				</view>
				<view class="form_item1">
					<view class="form_name1">备注</view>
					<scroll-view class="input_wrap1">
						<textarea value="" name="memo" placeholder-style="font-size:30upx;" placeholder="请填写备注" />
					</scroll-view>
				</view>
			</view>
			<button class="button" form-type="submit">立即加入</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo:{},
				token:'',
			}
		},
		onLoad(option) {
			this.token=option.token
			this.userInfo = uni.getStorageSync('userInfo');
		},
		methods: {
			returnPage(){
				uni.navigateBack({
					delta:1
				})
			},
			// 表单提交
			formSubmit(e){
				this.userInfo.nickName = e.detail.value.name;
				this.userInfo.mobile = e.detail.value.mobile;
				var phone_ex = /^1\d{10}$/;
				if(this.userInfo.nickName == ''){
					this.Unfold_data.showWindow('请输入您的姓名！');
					return;
				}
				if (!this.userInfo.mobile.match(phone_ex)) {
					this.Unfold_data.showWindow('手机号格式不正确！');
					return;
				}
				if(this.userInfo.mobile.length < 11){
					this.Unfold_data.showWindow('手机号码不正确！');
					return;
				}
				var url = '/api/home/join_us/add';
				let params = {
					name:this.userInfo.nickName,
					mobile:this.userInfo.mobile,
					memo:e.detail.value.memo,
					token:this.token
				};
				
				this.Unfold_data.upload_data(params, 'POST', url, res => {
					// console.log(res)
					if (res.statusCode == 200 && res.data.code == 1) {
						this.Unfold_data.showWindow('恭喜您已成功加入我们！');
						setTimeout(()=>{
							uni.reLaunch({
								url:'/pages/center/index'
							})
						},1000)
					}else{
						this.Unfold_data.showWindow(res.data.msg);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.content {
	width: 100%;
	position: relative;
	.top_nav{
		width: 100%;
		height: 200upx;
		background-image: url('https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/buy/1.png');
		background-size: cover;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		.kong{
			width: 100%;
			height: 60upx;
		}
		.tab_item{
			width: 90%;
			margin: 0 auto;
			height: 140upx;
			display: flex;
			align-items: center;
			justify-content: center;
			.return{
				flex: 1;
				width: 100%;
				image{
					width: 29upx;
					height: 29upx;
				}
			}
			.title{
				flex: 8;
				width: 100%;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 10;
			}
		}
	}
	.form_wrap{
		width: 100%;
		padding-top: 200upx;
		.form_item{
			width: 90%;
			margin: 0 auto;
			height: 100upx;
			border-bottom: 2upx solid #f2f2f2;
			display: flex;
			.form_name{
				flex: 1;
				display: flex;
				align-items: center;
			}
			.input_wrap{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				input{
					text-align: right;
					font-size: 30upx;
				}
			}
		}
		.form_item1{
			width: 90%;
			margin: 0 auto;
			height: 300upx;
			margin-top: 80upx;
			display: flex;
			flex-direction: row;
			.form_name1{
				flex: 1;
				display: flex;
			}
			.input_wrap1{
				flex: 5;
				width: 100%;
				height: 200upx;
				border: 2upx solid #ededed;
				padding: 20upx;
				display: flex;
				justify-content: flex-end;
				textarea{
					width: 100%;
					height: 100%;
					font-size: 30upx;
				}
			}
		}
	}
	.button{
		width: 80%;
		height: 90upx;
		background-image: url(https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/static/buy/1.png);
		background-size: cover;
		color: #FFFFFF;
		margin-top: 180upx;
	}
}
</style>
